<!--
 * @Author: daidai
 * @Date: 2022-03-01 09:43:37
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-09 11:40:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-bottom.vue
-->
<template>
  <div
    class="left_boottom_wrap block_34 flex-col"
    :class="{ 'overflow-y-auto': !sbtxSwiperFlag }"
  >
    <div
      class="box_97 flex-row"
      :style="
        'background-color: ' +
        (isRed ? 'rgba(254, 5, 0, 1)' : 'rgba(65, 85, 116, 1)')
      "
    >
      <div class="image-text_78 flex-row justify-between">
        <img
          v-if="isRed"
          class="thumbnail_49"
          referrerpolicy="no-referrer"
          src="@/assets/imgs/SketchPngcd1ea6edb9ca3971386dc2b1d09aecf8c115ea6c42a5738afcea8fa052a72f2c.png"
        />
        <img
          v-else
          class="thumbnail_49"
          referrerpolicy="no-referrer"
          src="@/assets/imgs/SketchPnga75dcb39eb787137ee88a2d21d82d369a3ef4bd974f5ef1f2bbb2efe7370f92f.png"
        />
        <span v-if="isRed" class="text-group_22">红榜</span>
        <span v-else class="text-group_22">黑榜</span>
      </div>
    </div>
    <div class="box_98 flex-row">
      <div class="image-text_79 flex-row justify-between">
        <img
          v-if="isRed"
          class="thumbnail_50"
          referrerpolicy="no-referrer"
          src="@/assets/imgs/SketchPng6a193fa62c28d87dccfdf3d9e2f92a0c2947030130e6da46c559b607075dc108.png"
        />
        <img
          v-else
          class="thumbnail_50"
          referrerpolicy="no-referrer"
          src="@/assets/imgs/SketchPng28a267060f240d701366638e8757ab3951b95efb4c77693b5a72cae9359c523d.png"
        />
        <span class="text-group_23">排名</span>
      </div>
      <span class="text_311">线路负责人</span>
      <span class="text_312">0故障天数</span>
    </div>
    <component
      class="scrollc beautify-scroll-def"
      :is="components"
      :data="list"
      :class-option="defaultOption"
    >
      <ul>
        <template v-for="(item, i) in list">
          <li class="text-wrapper_41 flex-row" :key="i">
            <div class="text_313">{{ i + 1 }}</div>
            <div class="text_314">{{item.lineResponsiblePerson}}</div>
            <div class="text_315">{{item.zeroFaultDays}}</div>
          </li>
        </template>
      </ul>
    </component>
  </div>

  <!-- <Reacquire v-else @onclick="getData" style="line-height: 200px" /> -->
</template>

<script>
import { currentGET } from "api";
import vueSeamlessScroll from "vue-seamless-scroll"; // vue2引入方式
import Kong from "@/components/kong.vue";
export default {
  props: {
    isRed: {
      type: Boolean,
      default: true,
    },
    data: {
      type: Array,
      default: () => [],
    },
  },
  components: { vueSeamlessScroll, Kong },
  data() {
    return {
      list: [],
      pageflag: true,
      components: vueSeamlessScroll,
      defaultOption: {
        ...this.$store.state.setting.defaultOption,
        singleHeight: 90,
        limitMoveNum: 5,
        step: 0,
      },
    };
  },
  computed: {
    sbtxSwiperFlag() {
      let sbtxSwiper = this.$store.state.setting.sbtxSwiper;
      if (sbtxSwiper) {
        this.components = vueSeamlessScroll;
      } else {
        this.components = Kong;
      }
      return sbtxSwiper;
    },
  },
  created() {},
  watch: {
    data: {
      handler(val) {
        this.getData(val);
      },
      deep: true,
    },
  },
  mounted() {
    this.getData(this.data);
  },
  methods: {
    getData(val) {
      this.list = val.filter(item => item);
      let timer = setTimeout(() => {
        clearTimeout(timer);
        this.defaultOption.step = this.$store.state.setting.defaultOption.step;
      }, this.$store.state.setting.defaultOption.waitTime);
    },
  },
};
</script>
<style lang="scss" scoped>
.left_boottom_wrap {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.doudong {
  //  vertical-align:middle;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.scrollc {
  overflow-y: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.block_34 {
  background-color: rgba(4, 42, 102, 1);
  width: 286px;
  height: 232px;
  .box_97 {
    background-color: rgba(254, 5, 0, 1);
    width: 286px;
    height: 31px;
    .image-text_78 {
      width: 57px;
      height: 22px;
      margin: 5px 0 0 114px;
      .thumbnail_49 {
        width: 16px;
        height: 16px;
        margin-top: 2px;
      }
      .text-group_22 {
        width: 33px;
        height: 22px;
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 16px;
        letter-spacing: 0.30000001192092896px;
        font-family: PingFangSC-Heavy;
        font-weight: 900;
        text-align: left;
        white-space: nowrap;
        line-height: 22px;
      }
    }
  }
  .box_98 {
    background-color: rgba(6, 54, 112, 1);
    width: 262px;
    height: 30px;
    margin: 12px 0 0 12px;
    .image-text_79 {
      width: 43px;
      height: 17px;
      margin: 7px 0 0 8px;
      .thumbnail_50 {
        width: 14px;
        height: 14px;
        margin-top: 2px;
      }
      .text-group_23 {
        width: 25px;
        height: 17px;
        overflow-wrap: break-word;
        color: rgba(96, 127, 181, 1);
        font-size: 12px;
        letter-spacing: 0.22499999403953552px;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 17px;
      }
    }
    .text_311 {
      width: 62px;
      height: 17px;
      overflow-wrap: break-word;
      color: rgba(96, 127, 181, 1);
      font-size: 12px;
      letter-spacing: 0.22499999403953552px;
      font-weight: normal;
      text-align: left;
      white-space: nowrap;
      line-height: 17px;
      margin: 7px 0 0 37px;
    }
    .text_312 {
      width: 57px;
      height: 17px;
      overflow-wrap: break-word;
      color: rgba(96, 127, 181, 1);
      font-size: 12px;
      letter-spacing: 0.22499999403953552px;
      font-weight: normal;
      text-align: left;
      white-space: nowrap;
      line-height: 17px;
      margin: 7px 28px 0 27px;
    }
  }

  .text-wrapper_41 {
    background-color: rgba(4, 47, 115, 1);
    // width: 262px;
    height: 30px;
    margin-left: 12px;
    div {
      overflow: hidden;
    }
    .text_313 {
      width: 50px;
      height: 17px;
      overflow-wrap: break-word;
      color: rgba(96, 127, 181, 1);
      font-size: 12px;
      letter-spacing: 0.22499999403953552px;
      font-weight: normal;
      text-align: left;
      white-space: nowrap;
      line-height: 17px;
      margin: 7px 0 0 17px;
    }
    .text_314 {
      width: 110px;
      height: 17px;
      overflow-wrap: break-word;
      color: rgba(102, 255, 255, 1);
      font-size: 12px;
      letter-spacing: 0.22499999403953552px;
      font-weight: normal;
      text-align: center;
      white-space: nowrap;
      line-height: 17px;
      margin: 7px 0 0 0;
    }
    .text_315 {
      width: 57px;
      height: 17px;
      overflow-wrap: break-word;
      color: rgba(78, 232, 152, 1);
      font-size: 12px;
      letter-spacing: 0.22499999403953552px;
      font-weight: normal;
      text-align: center;
      white-space: nowrap;
      line-height: 17px;
      margin: 6px 12px 0 0;
    }
  }
}
</style>
